<template>
  <!-- 方案规划导航栏 -->
   <div style="width: 100%;height: 100%;text-align: center;">

 
  <div style="display: inline-flex;width: 100%;height: 90%;text-align: center;">
    
    <div id="hppDiv1" @click="clickBox('1')" class="disabledBox">

      <div style="width: 100%;height: 28%;">
        <img style="height: 85px;height: 85px;margin-top: 2vh;" src="../../assets/images/djc_b.png">
      </div>

      <div style="width: 100%;    height: 15%;margin-top: 0vh;">
        <div class="titleCss">制(储)氢系统规划设计</div>  
        <div class="titleCss">碱性电解槽</div>  
      </div>

      <div style="width: 100%;height: 30%;margin-top: 2vh;">
                
        <el-form ref="form" label-position="right" :disabled="readonlyFlag1" :model="form" label-width="80px">
          <el-form-item label="单体容量：">
            <el-input style="width: 90%;" v-model="form.individualCapacity1">
              <template slot="append">kW</template>
            </el-input>
          </el-form-item>
          <el-form-item label="数量：">
            <el-input style="width: 90%;"  v-model="form.number1">
              <template slot="append">个</template>
            </el-input>
          </el-form-item>
          <el-form-item label="单价：">
            <el-input style="width: 90%;"  v-model="form.unitPrice1">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="储氢容量：">
            <el-input style="width: 90%;"  v-model="form.hydrogenStorageCap1">
              <template slot="append">kg</template>
            </el-input>
          </el-form-item>
        </el-form>

      </div>

    </div>
        
    <div id="hppDiv2" @click="clickBox('2')" class="disabledBox">
      
      <div style="width: 100%;height: 28%;">
        <img style="height: 85px;height: 85px;margin-top: 1vh;" src="../../assets/images/djc2.png">
      </div>

      <div style="width: 100%;    height: 15%;margin-top: 0vh;">
        <div class="titleCss">制(储)氢系统规划设计</div>  
        <div class="titleCss">PEM电解槽</div>  
      </div>

      <div style="width: 100%;height: 30%;margin-top: 2vh;">
                
        <el-form ref="form" label-position="right" :disabled="readonlyFlag2" :model="form" label-width="80px">
          <el-form-item label="单体容量：">
            <el-input style="width: 90%;" v-model="form.individualCapacity2">
              <template slot="append">kW</template>
            </el-input>
          </el-form-item>
          <el-form-item label="数量：">
            <el-input style="width: 90%;"  v-model="form.number2">
              <template slot="append">个</template>
            </el-input>
          </el-form-item>
          <el-form-item label="单价：">
            <el-input style="width: 90%;"  v-model="form.unitPrice2">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="储氢容量：">
            <el-input style="width: 90%;"  v-model="form.hydrogenStorageCap2">
              <template slot="append">kg</template>
            </el-input>
          </el-form-item>
        </el-form>

      </div>

    </div>
        
    <div id="hppDiv3" @click="clickBox('3')" class="disabledBox">
      
      <div style="width: 100%;height: 28%;">
        <img style="height: 85px;height: 85px;margin-top: 1vh;" src="../../assets/images/zq.png">
      </div>

      <div style="width: 100%;    height: 15%;margin-top: 0vh;">
        <div class="titleCss">天然⽓重整制氢</div>   
      </div>

      <div style="width: 100%;height: 30%;margin-top: 2vh;">
                
        <el-form ref="form" label-position="right" :disabled="readonlyFlag3" :model="form" label-width="80px">
          <el-form-item label="设备容量：">
            <el-input style="width: 90%;" v-model="form.individualCapacity3">
              <template slot="append">kW</template>
            </el-input>
          </el-form-item>
          <el-form-item label="单价：">
            <el-input style="width: 90%;"  v-model="form.number3">
              <template slot="append">元/kW</template>
            </el-input>
          </el-form-item>
          <el-form-item label="原料⽓价：">
            <el-input style="width: 90%;"  v-model="form.unitPrice3">
              <template slot="append">元/kg</template>
            </el-input>
          </el-form-item>
          <el-form-item label="储氢容量：">
            <el-input style="width: 90%;"  v-model="form.hydrogenStorageCap3">
              <template slot="append">kg</template>
            </el-input>
          </el-form-item>
        </el-form>

      </div>

    </div>

    <div id="hppDiv4" @click="clickBox('4')" class="disabledBox">

      <div style="width: 100%;height: 28%;">
        <img style="height: 85px;height: 85px;margin-top: 1vh;" src="../../assets/images/zq.png">
      </div>

      <div style="width: 100%;    height: 15%;margin-top: 0vh;">
        <div class="titleCss">煤⽓化制氢</div>   
      </div>

      <div style="width: 100%;height: 30%;margin-top: 2vh;">
                
        <el-form ref="form" label-position="right" :disabled="readonlyFlag4" :model="form" label-width="80px">
          <el-form-item label="设备容量：">
            <el-input style="width: 90%;" v-model="form.individualCapacity4">
              <template slot="append">kW</template>
            </el-input>
          </el-form-item>
          <el-form-item label="单价：">
            <el-input style="width: 90%;"  v-model="form.number4">
              <template slot="append">元/kW</template>
            </el-input>
          </el-form-item>
          <el-form-item label="煤单价：">
            <el-input style="width: 90%;"  v-model="form.unitPrice4">
              <template slot="append">元/kg</template>
            </el-input>
          </el-form-item>
          <el-form-item label="储氢容量：">
            <el-input style="width: 90%;"  v-model="form.hydrogenStorageCap4">
              <template slot="append">kg</template>
            </el-input>
          </el-form-item>
        </el-form>

      </div>
    </div>

    <div id="hppDiv5" @click="clickBox('5')" class="disabledBox">

      
      <div style="width: 100%;height: 28%;">
        <img style="height: 85px;height: 85px;margin-top: 1vh;" src="../../assets/images/gyfzq.png">
      </div>

      <div style="width: 100%;    height: 15%;margin-top: 0vh;">
        <div class="titleCss">⼯业副产氢</div>   
      </div>

      <div style="width: 100%;height: 30%;margin-top: 2vh;">
                
        <el-form ref="form" label-position="right" :disabled="readonlyFlag5" :model="form" label-width="80px">
          <el-form-item label="设备容量：">
            <el-input style="width: 90%;" v-model="form.individualCapacity5">
              <template slot="append">kW</template>
            </el-input>
          </el-form-item>
          <el-form-item label="单价：">
            <el-input style="width: 90%;"  v-model="form.number5">
              <template slot="append">元/kW</template>
            </el-input>
          </el-form-item>
          <el-form-item label="原料气价：">
            <el-input style="width: 90%;"  v-model="form.unitPrice5">
              <template slot="append">元/kg</template>
            </el-input>
          </el-form-item>
          <el-form-item label="储氢容量：">
            <el-input style="width: 90%;"  v-model="form.hydrogenStorageCap5">
              <template slot="append">kg</template>
            </el-input>
          </el-form-item>
        </el-form>

      </div>

    </div>  


  </div>

  
  <div>
      <el-button type="primary" @click="savePageData()" style="width: 110px">
        <span class="button-text">保存</span>
      </el-button>
      <el-button type="primary" @click="clearPageData()" style="width: 110px">
        <span class="button-text">清空</span>
      </el-button>
  </div>

</div>
  
</template>

<script>
  export default {
    name: 'hydrogenProductionPathway',
    data() {
      return {
        form: {
          id:"",
          projectId:"",
          type:"",
          individualCapacity1:"",
          number1:"",
          unitPrice1:"",
          hydrogenStorageCap1:"",
          individualCapacity2:"",
          number2:"",
          unitPrice2:"",
          hydrogenStorageCap2:"",

          individualCapacity3:"",
          number3:"",
          unitPrice3:"",
          hydrogenStorageCap3:"",

          individualCapacity4:"",
          number4:"",
          unitPrice4:"",
          hydrogenStorageCap4:"",

          individualCapacity5:"",
          number5:"",
          unitPrice5:"",
          hydrogenStorageCap5:"",

        },
        readonlyFlag1 : true,
        readonlyFlag2 : true,
        readonlyFlag3 : true,
        readonlyFlag4 : true,
        readonlyFlag5 : true, 
        activeDate: '',
        type: '',
        dataType : "",
        projectId: '',

      }
    },
    mounted: function() {
      //获取项目id
      this.projectId = this.$route.query.projectId;
      this.form.projectId = this.projectId;
      this.queryPageData();
    },
    methods: {

      clickBox:function(dataType){

        this.readonlyFlag1 = true;
        this.readonlyFlag2 = true;
        this.readonlyFlag3 = true;
        this.readonlyFlag4 = true;
        this.readonlyFlag5 = true; 

        if(dataType=="1"){
          this.readonlyFlag1 = false;
        }else if(dataType=="2"){
          this.readonlyFlag2 = false;
        }else if(dataType=="3"){
          this.readonlyFlag3 = false;
        }else if(dataType=="4"){
          this.readonlyFlag4 = false;
        }else if(dataType=="5"){
          this.readonlyFlag5 = false;
        }

        this.form.type = dataType;

        for(var i = 1;i<=5;i++){
          $("#hppDiv"+i).attr("class","disabledBox");
        }
        $("#hppDiv"+dataType).attr("class","box");
      },

      queryPageData : function(){

        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryPageData?projectId='+this.projectId+"&tableName=hp_pathway").then((res) => {
          var result = res.data.data;
          if(result){
            vm.form = result;
          }
        }).catch((error) => {
          console.log(error);
        });


      },
      savePageData : function(){
 
        var vm = this;
        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/savePageData', {
          "pageData": JSON.stringify(this.form),
          "tableName":"hp_pathway"
        }).then((res) => {
        
          if (res.data.flag) {
            vm.form.id = res.data.id;
            this.$message({
              type: 'success',
              message: res.data.message
            });

          } else {
            this.$message.error(res.data.message);
          }
        });

      },
      clearPageData(){
        this.form = {
          id:"",
          type:"",
          individualCapacity1:"",
          number1:"",
          unitPrice1:"",
          hydrogenStorageCap1:"",
          individualCapacity2:"",
          number2:"",
          unitPrice2:"",
          hydrogenStorageCap2:"",

          individualCapacity3:"",
          number3:"",
          unitPrice3:"",
          hydrogenStorageCap3:"",

          individualCapacity4:"",
          number4:"",
          unitPrice4:"",
          hydrogenStorageCap4:"",

          individualCapacity5:"",
          number5:"",
          unitPrice5:"",
          hydrogenStorageCap5:"",
        }
      }
    }
  }
</script>



<style scoped>
  /deep/.el-input.is-disabled .el-input__inner {
      background-color: #4c5b7182;
      border-color: #E4E7ED;
      color: #C0C4CC;
      cursor: not-allowed;
  }
  .el-input.is-disabled .el-input__inner {
    background-color: #4c5b7182;
    border-color: #E4E7ED;
    color: #C0C4CC;
    cursor: not-allowed;
}
  /deep/ .el-form-item {
      margin-bottom: 5px;
  }
  /deep/ .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  /deep/.el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  /deep/.el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 



  .buttonStyle {
    height: 4vh;
    width: 24vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #1f2c6c3b;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  .disabledBox{
    width: 31vh;
    height: 44vh;
    margin: auto;
    border-radius: 4px;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
    cursor: pointer;
  }
  .box{
    width: 31vh;
    height: 44vh;
    margin: auto; 
    border-radius: 4px; 
    background-image: linear-gradient(to bottom, #2946ad, #61dde37a);

    border: 1px solid rgb(62 111 219 / 88%);
    cursor: pointer;
  }
 
  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>
